<template>
  <div class="avue-sidebar" style="margin-top:30px;border-radius: 0px 80px 0px 0px;">
    <!-- <logo/> -->

    <el-scrollbar >

      <div
        v-if="this.validatenull(menu)"
        class="avue-sidebar--tip">没有发现菜单</div>

      <el-menu
        :default-active="nowTagValue"
        :show-timeout="200"
        :collapse="keyCollapse"
        unique-opened
        mode="vertical">
        <el-menu-item 
      :class="{'is-active':vaildAvtive(menulist)}"
      :index="menulist.path"
      @click.native="opened(menulist)" style="background-color:transparent;height: 80px;line-height:80px;padding-left:20px;border-radius: 0px 80px 0px 0px;">
        <i class="el-icon-house"/>
        <span slot="title">{{menulist.label}}</span>
      </el-menu-item>
    <div style="overflow-y:auto;" :style="{maxHeight:height}" class="overflowStyle" >

        <sidebar-item
          :menu="newMenulist"
          :screen="screen"
          :props="website.menu.props"
          :collapse="keyCollapse"
          first/>
          </div>
      </el-menu>
      
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import logo from '../logo'
import sidebarItem from './sidebarItem'
export default {
  name: 'Sidebar',
  inject: ["Index"],
  data(){
return{
 height:document.body.clientHeight-220+'px',
// menulist:{},
// newMenulist:[],
    }  
    },
  components: { sidebarItem, logo },
  created() {
    
       let parentId = sessionStorage.getItem("parentId")?sessionStorage.getItem("parentId"):'10182'

    this.Index.openMenu({id:parentId});
    //this.getMenuList()
    
  },
  computed: {
    ...mapGetters(['website', 'menu', 'tag', 'keyCollapse', 'screen']),
    menulist:function(){
      return this.menu[0]
    },
    newMenulist:function(){
      return this.menu.slice(1)
    },
     nowTagValue: function() {
      return this.$router.$avueRouter.getValue(this.$route)
    },
  },
  methods:{
    // getMenuList(){
    //   this.menulist = this.menu[0];
    //   this.newMenulist = this.menu.slice(1);
    // },
      vaildAvtive(item) {
     
         const groupFlag = (item['group'] || []).some(ele =>{
        this.$route.path.includes(ele)})
      return this.nowTagValue === item.path || groupFlag
     
     
    },
     opened(item) {
     
      if (this.screen <= 1) this.$store.commit('SET_COLLAPSE')
      this.$router.$avueRouter.group = item.group
      this.$router.push({
        path: this.$router.$avueRouter.getPath({
          name: item.label,
          src: item.path
        }),
        query: item.query
      }).catch(() => {})
    }
  }
}
</script>


